<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ user.full_name }} - 详情</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <nav class="navbar">
        <a href="/" class="navbar-brand" style="display: flex; align-items: center; gap: 0.5rem;">
            <img src="/static/images/openokr.png" alt="OpenOKR" style="height: 32px; width: auto;">
            <span>OpenOKR</span>
        </a>
        <ul class="navbar-menu">
            <li><a href="/auth/dashboard">返回仪表板</a></li>
            <li><a href="#" onclick="logout()">登出</a></li>
        </ul>
    </nav>

    <div class="container-fluid">
        <div style="display: flex; align-items: center; margin-bottom: 2rem;">
            <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--success-color)); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: 700; margin-right: 1.5rem;">
                {{ user.full_name[0] }}
            </div>
            <div>
                <h1 style="margin-bottom: 0.5rem;">{{ user.full_name }}</h1>
                <p style="color: var(--text-secondary); margin-bottom: 0.25rem;">{{ user.department or '未分配部门' }}</p>
                <p style="color: var(--text-secondary); font-size: 0.875rem;">{{ user.email }}</p>
            </div>
        </div>

        <!-- 个人状态 -->
        <div class="card">
            <div class="card-header">📊 个人状态</div>
            <div class="card-body">
                <div id="user-status-container">
                    <p style="text-align: center; color: var(--text-secondary);">加载中...</p>
                </div>
            </div>
        </div>

        <!-- 目标列表 -->
        <div class="card">
            <div class="card-header">🎯 个人目标</div>
            <div class="card-body">
                <div id="objectives-container">
                    <p style="text-align: center; color: var(--text-secondary);">加载中...</p>
                </div>
            </div>
        </div>

        <!-- 项目列表 -->
        <div class="card">
            <div class="card-header">📁 项目</div>
            <div class="card-body">
                <div class="grid grid-3" id="projects-container">
                    <p style="text-align: center; color: var(--text-secondary);">加载中...</p>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/common.js"></script>
    <script>
        const userId = {{ user.id }};

        // 加载用户状态
        async function loadUserStatus() {
            try {
                const response = await fetch(`/api/status/user/${userId}/latest`);
                if (!response.ok) throw new Error('Failed to fetch status');

                const status = await response.json();
                const container = document.getElementById('user-status-container');

                if (status) {
                    container.innerHTML = `
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;">
                            <div>
                                <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">工作状态</div>
                                <div>${getStatusBadge(status.work_status)}</div>
                            </div>
                            <div>
                                <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">位置</div>
                                <div style="font-weight: 500;">${status.location || '未设置'}</div>
                            </div>
                            <div>
                                <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">最后更新</div>
                                <div style="font-weight: 500;">${formatDate(status.created_at)}</div>
                            </div>
                        </div>
                        ${status.current_task ? `
                            <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color);">
                                <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">当前任务</div>
                                <div style="font-weight: 500;">${status.current_task}</div>
                            </div>
                        ` : ''}
                    `;
                } else {
                    container.innerHTML = '<p style="color: var(--text-secondary);">暂无状态信息</p>';
                }
            } catch (error) {
                console.error('Error loading status:', error);
                document.getElementById('user-status-container').innerHTML = '<p style="color: var(--danger-color);">加载状态失败</p>';
            }
        }

        // 加载目标
        async function loadObjectives() {
            try {
                const objectives = await getObjectives({ owner_id: userId });
                const container = document.getElementById('objectives-container');

                if (objectives.length === 0) {
                    container.innerHTML = '<p style="text-align: center; color: var(--text-secondary);">暂无目标</p>';
                    return;
                }

                // 按类型分组
                const byType = {
                    operational: [],
                    strategic: [],
                    development: []
                };

                objectives.forEach(obj => {
                    if (byType[obj.type]) {
                        byType[obj.type].push(obj);
                    }
                });

                const typeLabels = {
                    operational: '经营目标',
                    strategic: '战略目标',
                    development: '研发目标'
                };

                const html = Object.keys(byType).map(type => {
                    const objs = byType[type];
                    if (objs.length === 0) return '';

                    const content = objs.map(obj =>
                        `<div style="margin-bottom: 0.75rem; padding: 1rem; background: var(--background-color); border-radius: 6px;">
                            <div style="font-weight: 500; color: var(--text-primary);">${obj.title}</div>
                            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">
                                ${obj.description || '暂无描述'}
                            </div>
                            <div style="margin-top: 0.75rem;">
                                <div class="progress">
                                    <div class="progress-bar ${obj.progress >= 70 ? 'success' : obj.progress >= 40 ? 'warning' : 'danger'}"
                                         style="width: ${obj.progress}%"></div>
                                </div>
                                <span style="font-size: 0.75rem; color: var(--text-secondary);">${obj.progress}%</span>
                            </div>
                            <div style="margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-secondary);">
                                ${getStatusBadge(obj.status)}
                                <span style="margin-left: 0.5rem;">📅 ${formatDate(obj.start_date)} - ${formatDate(obj.end_date)}</span>
                            </div>
                        </div>`
                    ).join('');

                    return `
                        <div style="margin-bottom: 1.5rem;">
                            <h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--primary-color);">
                                ${typeLabels[type]}
                            </h3>
                            ${content}
                        </div>
                    `;
                }).filter(h => h).join('');

                container.innerHTML = html || '<p style="text-align: center; color: var(--text-secondary);">暂无目标</p>';
            } catch (error) {
                console.error('Error loading objectives:', error);
                showNotification('加载目标失败', 'error');
            }
        }

        // 加载项目
        async function loadProjects() {
            try {
                const projects = await getProjects({ owner_id: userId });
                const container = document.getElementById('projects-container');

                if (projects.length === 0) {
                    container.innerHTML = '<p style="text-align: center; color: var(--text-secondary); grid-column: 1 / -1;">暂无项目</p>';
                    return;
                }

                container.innerHTML = projects.map(proj => `
                    <div class="card" style="padding: 1rem;">
                        <h4 style="margin-bottom: 0.5rem; font-size: 1rem;">${proj.name}</h4>
                        <p style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.75rem;">
                            ${proj.description || '暂无描述'}
                        </p>
                        <div style="margin-bottom: 0.5rem;">
                            <div style="font-size: 0.75rem; color: var(--text-secondary);">进度</div>
                            <div class="progress" style="height: 6px; margin-top: 0.25rem;">
                                <div class="progress-bar ${proj.progress >= 70 ? 'success' : proj.progress >= 40 ? 'warning' : 'danger'}"
                                     style="width: ${proj.progress}%"></div>
                            </div>
                            <span style="font-size: 0.75rem; color: var(--text-secondary);">${proj.progress}%</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-secondary);">
                            <span>📅 ${formatDate(proj.start_date)} - ${formatDate(proj.end_date)}</span>
                        </div>
                        <div style="margin-top: 0.5rem;">
                            ${getStatusBadge(proj.status)}
                        </div>
                    </div>
                `).join('');
            } catch (error) {
                console.error('Error loading projects:', error);
                showNotification('加载项目失败', 'error');
            }
        }

        // 修改getObjectives和getProjects函数以支持查询参数
        async function getObjectives(params = {}) {
            const queryString = new URLSearchParams(params).toString();
            const url = `/api/objectives${queryString ? '?' + queryString : ''}`;
            const response = await fetch(url);
            if (!response.ok) throw new Error('Failed to fetch objectives');
            return response.json();
        }

        async function getProjects(params = {}) {
            const queryString = new URLSearchParams(params).toString();
            const url = `/api/projects${queryString ? '?' + queryString : ''}`;
            const response = await fetch(url);
            if (!response.ok) throw new Error('Failed to fetch projects');
            return response.json();
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadUserStatus();
            loadObjectives();
            loadProjects();
        });
    </script>
</body>
</html>
